<template>
<div>
    <div class="box-a">
    </div>        
</div>  
</template>

<script>
export default {

}
</script>

<style scoped>
.box-a{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: myframe 3s infinite;
    border-radius: 50px;
}
@keyframes myframe{
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }
    25% {
        background: yellow;
        left: 200px;
        top: 0px;
    }
    50% {
        background: blue;
        left: 200px;
        top: 200px;
    }
    75% {
        background: green;
        left: 0px;
        top: 200px;
    }
    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
}
</style>